<template>
  <view class="record_list">
    <view class="search">
      <u-icon name="search" size="22" color="#297AFD"></u-icon>
      <view class="select" @click="isShow = true">
        <view class="title">{{ types.find(x => x.value == form.SearchType).label }}</view>
        <u-icon name="arrow-down-fill" color="#64707D" size="10"></u-icon>
      </view>
      <input type="text" v-model="form.KeyWord" placeholder="请输入手机号/ 激活码/Id关键字" @change="handleChange">
    </view>
    <u-empty mode="list" v-if="!list.length"></u-empty>
    <u-list @scrolltolower="scrolltolower" height="1000rpx">
      <u-list-item v-for="(item, index) in list" :key="index">
        <view class="record_item">
          <view class="record_cell">
            <text>项目：</text>
            <view class="record_value">{{ item.OrderTypeName }}</view>
          </view>
          <view class="record_cell">
            <text>科目：</text>
            <view class="record_value">{{ item.Items.map(x => x.MealName) }}</view>
          </view>
          <view class="record_cell">
            <text>用户ID：</text>
            <view class="record_value">{{ item.UserNumber }}</view>
          </view>
          <view class="record_cell record_cell2">
            <text>价格：</text>
            <view class="record_value2">￥<text>{{ item.PayAmount }}</text></view>
          </view>
          <view class="record_cell record_cell2">
            <text>时间：</text>
            <view class="record_value">{{ $timestampToDate(item.CreateTime, 'time') }}</view>
          </view>
          <view class="record_cell record_cell2">
            <text>状态：</text>
            <view class="record_value status"><text>{{ statusObj[item.OrderStatus] }}</text></view>
          </view>
          <view class="record_cell" v-if="item.OrderStatus == 1">
            <text>激活码：</text>
            <view class="record_value record_value3">
              <text v-for="item1 in item.Items">{{ item1.ActiveCode }}</text>
            </view>
            <view class="record_copy" @click="handleCopy(item)">
              <image src="/static/img/copy.png" mode="widthFix"></image>
              <text>复制激活码</text>
            </view>
          </view>
        </view>
      </u-list-item>
    </u-list>
    <u-picker :show="isShow" :columns="[types]" keyName="label" @confirm="handleConfirmType"
      @cancel="isShow = false"></u-picker>
  </view>
</template>
<script>
import { getCopyText } from '../index.js'
export default {
  data () {
    return {
      isShow: false,
      selectValue: 0,
      types: [
        {
          label: "激活码",
          value: 0
        },
        {
          label: "用户ID",
          value: 1
        }
      ],
      biguoText: "",
      statusObj: {
        0: "待支付",
        1: "已支付",
        2: "支付失败",
        3: " 已退款",
        4: "已取消"
      },
      list: [],
      form: {
        SearchType: 0,
        KeyWord: "",
        PageSize: 10,
        PageIndex: 1
      }
    }
  },
  methods: {
    //选择分类
    handleConfirmType (e) {
      this.form.SearchType = e.value[0].value
      this.isShow = false
    },
    //获取笔果提示
    async getbiguoData () {
      const res = await this.$http.get('biguo/customcontent')
      this.biguoText = res.Data
    },
    //复制对应的激活码
    handleCopy (item) {

      let defualtText = ""
      if (item.OrderType == 3) { //毕过
        defualtText = this.biguoText
      } else if (item.OrderType == 6) { //6考试宝典
        const text = item.Items.map(x => x.ActiveCode).join("\n")
        defualtText = getCopyText(item.OrderType, text, item.Content)
      } else if (item.OrderType == 0 || item.OrderType == 7 || item.OrderType == 8) { //0慧考 8押题 7考研电子书
        const text = item.Items.map(x => x.MealName + " " + x.ActiveCode).join("\n")
        console.log("🚀 ~ handleCopy ~ text:", text)
        defualtText = getCopyText(item.OrderType, text, item.Content)
      } else {
        const text = item.Items.map(x => x.ActiveCode).join("\n")
        defualtText = getCopyText(item.OrderType, text)
      }
      this.copy(defualtText)
    },
    //复制
    copy (text) {
      uni.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({ title: '复制成功' })
        },
        fail: (e) => {
          console.log(e)
        },
        error: (e) => {
          console.log(e)
        }
      })
    },
    //搜索
    handleChange () {
      this.form.PageIndex = 1
      this.form.PageSize = 10
      this.list = []
      this.getRecord()
    },
    async getRecord () {
      uni.showLoading({ title: "加载中" })
      //管理员
      if (this.$store.state.userInfo.UserType == 3) {
        const res = await this.$http.get('pay/payrecord', this.form)
        const list = res.Data.DataList
        this.list = this.list.concat(list)
        //普通用户和年费代理
      } else {
        const res = await this.$http.get('pay/mypayrecord', this.form)
        const list = res.Data.DataList
        this.list = this.list.concat(list)
      }

      uni.hideLoading()
    },
    //加载分页
    scrolltolower () {
      this.form.PageIndex += 1
      this.getRecord()
      console.log("触底了")
    }
  },
  created () {
    this.getRecord()
    this.getbiguoData()
  }
}
</script>
<style lang="scss" scoped>
.record_list {
  width: 100%;
  overflow: hidden;
}

.record_item {
  width: 694rpx;
  margin: auto;
  margin-bottom: 30rpx;
  background: #FFFFFF;
  border-radius: 22rpx;
  overflow: hidden;
  padding: 8rpx 26rpx 24rpx;
  box-sizing: border-box;
}

.record_cell {
  width: 100%;
  display: flex;
  align-items: flex-start;
  margin-top: 22rpx;
}

.record_cell2 {
  align-items: center;
}

.record_cell>text {
  width: 100rpx;
  font-weight: bold;
  font-size: 24rpx;
  color: #83889F;
  flex-shrink: 0;
}

.record_value {
  font-weight: bold;
  font-size: 24rpx;
  color: #000000;

  text {
    width: 360rpx;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.record_value2 {
  font-weight: bold;
  color: #FF0000;
  font-size: 24rpx;
}

.record_value2 text {
  font-size: 32rpx;
}

.record_copy {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

.record_copy image {
  width: 24rpx;
  height: 24rpx;
  margin-right: 8rpx;
}

.record_copy text {
  font-weight: bold;
  font-size: 20rpx;
  padding-bottom: 4rpx;
  line-height: 28rpx;
  color: #1552FB;
  border-bottom: 2rpx solid #1552FB;
}

.status {
  color: #1552FB;
}

.record_value3 {
  color: #64707D;
}

.search {
  width: 694rpx;
  height: 36px;
  background: #FFFFFF;
  box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  margin: 15px auto;
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  box-sizing: border-box;
}

.search image {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-right: 4px;
}

.search input {
  width: 100%;
  font-weight: bold;
  font-size: 24rpx;
  color: #000000;
  flex: 1;
}

.search input::placeholder {
  color: #919191;
}

.select {
  display: flex;
  align-items: center;
  background: #F5F5F5;
  border-radius: 12rpx;
  padding: 10rpx;
  font-size: 22rpx;
  margin-right: 20rpx;
}
</style>